<template>
  <div class="coordinates-title fz-18">勘查区块范围，资源储量计算范围的拐点坐标，标高，面积及示意图</div>
  <div class="coordinate-format-title fz-18 m-t-20">坐标格式类型（2000国家大地坐标）</div>
  <div class="flex m-t-20">
    <div class="width40">
      <div class="flex-between">
        矿区范围拐点坐标:
        <el-checkbox v-model="checked1" label="1" size="large">经纬度坐标</el-checkbox>
      </div>
      <el-table class="table" :data="leftTableData" border height="250px">
        <el-table-column label="拐点" prop="date" align="center">
          <template #default="scope">
            <el-input type="text" v-model="scope.row.name" />
          </template>
        </el-table-column>
        <el-table-column label="X（起标高）" prop="date" align="center" width="120">
          <template #default>
            <el-input></el-input>
          </template>
        </el-table-column>
        <el-table-column label="Y（止标高）" prop="date" align="center" width="120">
          <template #default>
            <el-input></el-input>
          </template>
        </el-table-column>
        <el-table-column label="矿体标识" prop="date" align="center">
          <template #default>
            <el-input></el-input>
          </template>
        </el-table-column>
        <el-table-column label="性质" prop="date" align="center">
          <template #default>
            <el-input></el-input>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex-end m-t-5">
        <el-button type="primary" @click="leftTableAdd" plain>新增</el-button>
        <el-button type="danger" @click="leftTableDel" plain>删除</el-button>
      </div>
    </div>
    <div class="width40 m-l-50">
      <div class="flex-between">
        矿区范围拐点坐标:
        <el-checkbox v-model="checked1" label="1" size="large">经纬度坐标</el-checkbox>
      </div>
      <el-table class="table" :data="rightTableData" border height="250px">
        <el-table-column label="拐点" align="center">
          <template #default="scope">
            <el-input v-model="scope.row.name"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="X（起标高）" prop="date" align="center" width="120">
          <template #default>
            <el-input></el-input>
          </template>
        </el-table-column>
        <el-table-column label="Y（止标高）" prop="date" align="center" width="120">
          <template #default>
            <el-input></el-input>
          </template>
        </el-table-column>
        <el-table-column label="矿体标识" prop="date" align="center">
          <template #default>
            <el-input></el-input>
          </template>
        </el-table-column>
        <el-table-column label="性质" prop="date" align="center">
          <template #default>
            <el-input></el-input>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex-end m-t-5">
        <el-button type="primary" @click="rightTableAdd" plain>新增</el-button>
        <el-button type="danger" @click="rightTableDel" plain>删除</el-button>
      </div>
    </div>
  </div>
  <div class="m-t-20 flex">
    <el-button class="m-r-20" @click="handleReset">重置</el-button>
    <el-checkbox-group v-model="checkList">
      <el-checkbox label="1">显示矿山中心点</el-checkbox>
      <el-checkbox label="2">显示矿权坐标</el-checkbox>
      <el-checkbox label="3">显示储量坐标</el-checkbox>
      <el-checkbox label="4">显示拐点</el-checkbox>
      <el-checkbox label="5">显示标识</el-checkbox>
    </el-checkbox-group>
  </div>

  <div class="boundary-display-box">
    <img src="@/assets/reserves/fanwei.jpg" alt="" style="width: 200px; height: 200px" />
  </div>

  <el-form :model="fillInForm" label-width="auto">
    <div class="flex-between">
      <el-form-item label="矿区面积">
        <el-input v-model="fillInForm.c1">
          <template #append>KM</template>
        </el-input>
      </el-form-item>
      <el-form-item label="最低标尺">
        <el-input v-model="fillInForm.c1">
          <template #append>M</template>
        </el-input>
      </el-form-item>
      <el-form-item label="最高标高">
        <el-input v-model="fillInForm.c1">
          <template #append>M</template>
        </el-input>
      </el-form-item>
    </div>
    <div class="flex-between">
      <el-form-item label="资源储量计算面积">
        <el-input v-model="fillInForm.c1">
          <template #append>KM</template>
        </el-input>
      </el-form-item>
      <el-form-item label="最低标尺">
        <el-input v-model="fillInForm.c1">
          <template #append>M</template>
        </el-input>
      </el-form-item>
      <el-form-item label="最高标高">
        <el-input v-model="fillInForm.c1">
          <template #append>M</template>
        </el-input>
      </el-form-item>
    </div>
    <div class="flex-between">
      <el-form-item label="主要勘查工作：钻孔">
        <el-input v-model="fillInForm.c1">
          <template #append>个</template>
        </el-input>
      </el-form-item>
      <el-form-item label="总进尺">
        <el-input v-model="fillInForm.c1">
          <template #append>M</template>
        </el-input>
      </el-form-item>
      <el-form-item label="坑道掘进">
        <el-input v-model="fillInForm.c1">
          <template #append>M</template>
        </el-input>
      </el-form-item>
    </div>
    <div class="flex">
      <el-form-item label="开采矿体最低标高">
        <el-input v-model="fillInForm.c1">
          <template #append>M</template>
        </el-input>
      </el-form-item>
      <el-form-item label="开采矿体最高标高">
        <el-input v-model="fillInForm.c1">
          <template #append>M</template>
        </el-input>
      </el-form-item>
    </div>
  </el-form>
</template>

<script setup>
const fillInForm = inject('fillInForm');

const leftTableData = ref([{ name: '123' }, {}, {}, {}, {}]);
const rightTableData = ref([{ name: '456' }, {}, {}, {}, {}]);
const checked1 = ref();
const checkList = ref([]);
function handleReset() {
  checkList.value = [];
}
function leftTableAdd() {
  leftTableData.value.push({});
}

function leftTableDel(params) {
  leftTableData.value.pop();
}
function rightTableAdd() {
  rightTableData.value.push({});
}

function rightTableDel(params) {
  rightTableData.value.pop();
}
</script>
